<template>
    <div class="main member-list">
        <div class="filter-container">
            <el-input v-model="listQuery.mobile" class="filter-item" placeholder="请输入用户预留手机"></el-input>
            <el-input v-model="listQuery.realname" class="filter-item" placeholder="真实姓名"></el-input>
            <el-input v-model="listQuery.idCardNo" class="filter-item" placeholder="身份证号"></el-input>
            <el-input v-model="listQuery.loginMobile" class="filter-item" placeholder="登录手机号码"></el-input>
            <el-select v-model="listQuery.status" clearable placeholder="认证情况" class="filter-item">
              <el-option label="全部" value=""></el-option>
              <el-option :key="0" label="未认证" :value="0"></el-option>
              <el-option :key="2" label="审核中" :value="2"></el-option>
              <el-option :key="3" label="认证成功" :value="3"></el-option>
              <el-option :key="4" label="认证失败" :value="4"></el-option>
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <!-- <el-button class="filter-item" type="danger" @click="gmUpdate" v-if="rightsButtons['gmsync']" >公猫同步</el-button> -->
        </div>
         <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="真实姓名" prop="realName"></el-table-column>
            <el-table-column align="center" label="身份证号" prop="idNumber"></el-table-column>
            <el-table-column align="center" label="银行卡号" prop="bankCardNo"></el-table-column>
            <el-table-column align="center" label="银行名称" prop="bankName"></el-table-column>
            <el-table-column align="center" label="开户地区" prop="bankArea"></el-table-column>
            <el-table-column align="center" label="预留手机" prop="mobile"></el-table-column>
            <el-table-column align="center" label="认证时间" prop="updatedAt">
                <template slot-scope="scope">
                    <span>{{formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="认证状态" prop="status">
                <template slot-scope="scope">
                    <span v-if="scope.row.status===0">未认证</span>
                    <span v-else-if="scope.row.status===3">认证成功</span>
                    <span v-else-if="scope.row.status===2">审核中</span>
                    <span v-else>认证失败</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300px" v-if="rightsButtons['logOff']">
                <template slot-scope="scope">
                    <!-- <el-button v-if="rightsButtons['modifyPhone']" type="primary" size="mini" @click="update(scope.row,'phone')">修改手机号</el-button>
                    <el-button v-if="rightsButtons['modifyCard']" type="primary" size="mini"  @click="update(scope.row,'bankNo')">修改银行卡号</el-button> -->
                    <!-- <el-button v-if="rightsButtons['sync']" type="primary" size="mini" @click="synchronization(scope.row)">同步</el-button> -->
                    <el-button v-if="rightsButtons['logOff']" type="primary" size="mini"  @click="update(scope.row,'unsubscribe')" >注销</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
        ></el-pagination>
        <el-dialog title="注销" :visible.sync="showPop">
            <el-form :model="formData" size="medium" ref="form" label-width="120px" >
                <el-form-item  v-if="type==='bankNo'"  label="银行卡号:" prop="bankCardNo" :rules="commonRules.notNullRule">
                    <el-input v-model="formData.bankCardNo" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item v-if="type==='phone'" label="手机号码:" prop="mobile" :rules="commonRules.notNullRule">
                    <el-input v-model="formData.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item v-if="type==='unsubscribe'" label="验证码:" prop="unsubscribeCode" :rules="reject.unsubscribeCode">
                    <el-input v-model="formData.unsubscribeCode" placeholder="请输入12345678" maxlength="8"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :loading="btnLoading" :disabled="btnLoading">确定</el-button>
                <el-button @click="showPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'realname',
  data() {
    return {
        list:[],
        listLoading: false,
        showPop: false,
        btnLoading:false,
        listTotal:0,
        listQuery: {
            mobile:null,
            pageIndex: 1,
            pageSize: 10,
            realname: '',
            idCardNo: '',
            loginMobile: '',
            status: ''
        },
        formData:{},
        type:'phone',
        reject: {
            unsubscribeCode:[
                { required: true, message: "不能为空", trigger: "change" },
                {pattern: /12345678/, message: '请输入12345678', trigger: 'change'}
            ]
        }
    }
  },
  created() {
      this.getList()
  },
  methods: {
    search() {
        this.pageIndex = 1
        this.getList()
    },
    getList() {
        this.listLoading = true
        this.list = []
        this.request({
            url: '/bsnl-member/real-name/authentication/getUser',
            method: 'post',
            data: this.listQuery
        }).then((res) => {
            if(res.data){
                this.list = res.data.rows
                this.listTotal = res.data.total
            } else {
                this.list=[]
            }
            this.listLoading = false;
        }).catch(err => {
            console.log(err)
            this.list = []
            this.listLoading = false
        })
    },
    update(row, type) {
        this.showPop = true
        this.type = type
        this.formData = {...row}
    },
    save() {
        this.$refs.form.validate(valid => {
            if(valid) {
                this.btnLoading = true
                let aa = {phone:this.formData.mobile, authenticatedUserId:this.formData.userId}
                let bb = {bankCardNo: this.formData.bankCardNo, currentUserId:this.formData.userId}
                let cc = {authenticatedUserId:this.formData.userId}
                this.request({
                    url: this.type==='phone'?'/bsnl-member/real-name/authentication/updatePhoneByAuthenticatedUserId':(this.type==='bankNo'?'/bsnl-member/real-name/authentication/update-bank-no':'/bsnl-member/real-name/authentication/logoutCertification'),
                    method: 'post',
                    data: this.type==='phone'?aa:(this.type==='bankNo'?bb:cc),
                }).then((res) => {
                    if(res.status==='200') {
                        this.showPop = false
                        this.btnLoading = false
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.getList()
                    }
                }).catch(err => {
                    this.btnLoading = false
                    console.log(err)
                })
            }
        })
    },
    synchronization(row) {
        this.$confirm('同步用户实名信息至碧选?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
        }).then(() => {
            this.request({
                url: '/bsnl-member/real-name/authentication/syncCertificationByAuthenticatedUserId',
                method: 'post',
                data:{authenticatedUserId:row.userId}
            }).then((res) => {
                if(res.status==='200'){
                    this.$message.success('用户实名信息同步成功！')
                    this.getList()
                }
            }).catch(err => {
                console.log(err)
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            })
        })
    },
    //切换每页条数
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageIndex = page
      this.getList()
    },
    gmUpdate() {
        this.$confirm('与工猫已实名的用户信息进行一次同步,数据量巨大,请谨慎操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
        }).then(() => {
            this.request({
                url: '/bsnl-member/real-name/authentication/sync',
                method: 'post',
            }).then((res) => {
                if(res.status==='200'){
                    this.$message.success('同步成功！')
                }
            }).catch(err => {
                console.log(err)
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            })
        })
    }
  }
}
</script>

